import { useState } from 'react';
import { useGameStore } from '../../store/gameStore';
import { GameConfig, GamePhase } from '../../types';
import { allThemes } from '../../data/themes';

export default function GameSetup() {
  const actions = useGameStore(state => state.actions);
  
  const [config, setConfig] = useState<GameConfig>({
    playerCount: 2,
    initialMoney: 1500,
    startBonus: 200,
    theme: 'classic-city',
    winCondition: 'lastStanding',
    isSinglePlayer: false,
  });

  const handleStart = () => {
    actions.createGame(config);
    // 切换到角色选择阶段
    useGameStore.setState(state => ({
      game: state.game ? {
        ...state.game,
        phase: GamePhase.CHARACTER_SELECT,
      } : null,
    }));
  };

  return (
    <div className="min-h-screen flex items-center justify-center p-4">
      <div className="bg-white rounded-2xl shadow-2xl p-8 max-w-2xl w-full">
        <h1 className="text-4xl font-bold text-center mb-8 text-purple-600">
          🎲 大富翁游戏
        </h1>

        <div className="space-y-6">
          {/* 玩家数量 */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              玩家数量
            </label>
            <input
              type="number"
              min="2"
              max="6"
              value={config.playerCount}
              onChange={(e) => setConfig({ ...config, playerCount: parseInt(e.target.value) })}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
            />
          </div>

          {/* 初始资金 */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              初始资金
            </label>
            <input
              type="number"
              min="500"
              max="5000"
              step="100"
              value={config.initialMoney}
              onChange={(e) => setConfig({ ...config, initialMoney: parseInt(e.target.value) })}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
            />
          </div>

          {/* 起点奖励 */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              起点奖励
            </label>
            <input
              type="number"
              min="100"
              max="500"
              step="50"
              value={config.startBonus}
              onChange={(e) => setConfig({ ...config, startBonus: parseInt(e.target.value) })}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
            />
          </div>

          {/* 主题选择 */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              游戏主题
            </label>
            <select
              value={config.theme}
              onChange={(e) => setConfig({ ...config, theme: e.target.value })}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
            >
              {allThemes.map(theme => (
                <option key={theme.id} value={theme.id}>
                  {theme.name}
                </option>
              ))}
            </select>
          </div>

          {/* 胜利条件 */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">
              胜利条件
            </label>
            <select
              value={config.winCondition}
              onChange={(e) => setConfig({ ...config, winCondition: e.target.value as any })}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
            >
              <option value="lastStanding">最后一人</option>
              <option value="targetAssets">目标资产</option>
              <option value="timeLimit">时间限制</option>
            </select>
          </div>

          {/* 目标资产（如果选择了目标资产） */}
          {config.winCondition === 'targetAssets' && (
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                目标资产
              </label>
              <input
                type="number"
                min="5000"
                max="50000"
                step="1000"
                value={config.targetAssets || 10000}
                onChange={(e) => setConfig({ ...config, targetAssets: parseInt(e.target.value) })}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
              />
            </div>
          )}

          {/* 时间限制（如果选择了时间限制） */}
          {config.winCondition === 'timeLimit' && (
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                回合限制
              </label>
              <input
                type="number"
                min="10"
                max="100"
                step="5"
                value={config.timeLimit || 30}
                onChange={(e) => setConfig({ ...config, timeLimit: parseInt(e.target.value) })}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
              />
            </div>
          )}

          {/* 开始按钮 */}
          <button
            onClick={handleStart}
            className="w-full bg-purple-600 text-white py-3 px-6 rounded-lg font-semibold hover:bg-purple-700 transition-colors"
          >
            开始游戏
          </button>
        </div>
      </div>
    </div>
  );
}
